<template>
  <div v-if="data && data.id" class="course-item">
    <router-link :to="{name: 'course-detail', params: {id: data.id}}" :title="data.title" class="title">
      <img :src="data.avatar" :alt="data.title" />
    </router-link>
    <div class="course-item-desc">
      <router-link :to="{name: 'course-detail', params: {id: data.id}}" :title="data.title" class="title">
        <span>{{data.title}}</span>
      </router-link>
      <p v-if="data.courseType === 0">
        <i-tag :color="colors[data.subject - 1] || 'gray'">
          <subject-span :index="data.subject"></subject-span>
        </i-tag>
        <grade-span :index="data.grade"></grade-span>年级
      </p>
      <p v-else>
        <i-tag color="blue">新闻动态</i-tag>
      </p>
      <p style="color: gray;" class="margin-bottom-10">
        <i-icon type="eye"></i-icon>
        <span>{{data.viewed}}</span>
        <i-icon type="chatbox-working" style="margin-left:5px;"></i-icon>
        <span>{{data.commented}}</span>
        <i-icon type="thumbsup" style="margin-left:5px;"></i-icon>
        <span>{{data.recommended}}</span>
      </p>
      <p v-if="editable && !deleted" class="course-options">
        <router-link :to="{name: 'manage-edit-course', params: {id: data.id}}">编辑</router-link>
        <a href="javascript:;" @click="remove(data.id)">删除</a>
      </p>
      <p v-if="!editable" :title="'作者：' + data.createdBy.nick + ' 上传时间：' + data.createdAt">
        <span>{{data.createdBy.nick}}</span>
        <date-span :value="data.createdAt" class="pull-right"></date-span>
      </p>
      <p v-if="deleted">已删除</p>
    </div>
  </div>
</template>

<script>
import SubjectSpan from '../data-span/Subject'
import GradeSpan from '../data-span/Grade'
import DateSpan from '../data-span/Date'
import { mapActions } from 'vuex'
export default {
  components: {
    SubjectSpan,
    GradeSpan,
    DateSpan
  },
  props: ['data', 'editable'],
  data() {
    return {
      deleted: false,
      colors: [
        'red',
        'yellow',
        'blue',
        'green',
        'orange',
        'silver',
        'brown',
        'scarlet'
      ]
    }
  },
  mounted() {},
  methods: {
    ...mapActions({
      removeLesson: 'removeLesson'
    }),
    remove(id) {
      const that = this
      this.$Modal.confirm({
        title: '确认',
        content: '确认删除课程？',
        onOk: () => {
          that.removeLesson({
            id: id,
            callback() {
              that.deleted = true
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.course-item {
  margin-bottom: 15px;
  background: white;
  border-radius: 4px;
  .course-item-desc {
    padding: 5px;
  }
  .course-options {
    a {
      font-size: 12px;
    }
  }
}
a {
  color: #000;
  font-size: 14px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  img {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  &.title {
    display: block;
  }
}
</style>
